<template>
  <div>
    <!-- <el-steps :active="2" finish-status="success" align-center simple>
      <el-step title="项目信息填报"></el-step>
      <el-step title="合同信息填报"></el-step>
      <el-step title="It资产信息填报"></el-step>
    </el-steps> -->
    <div class="title">
      <el-row :gutter="20">
        <el-col :span="16" :offset="0" v-if="pinfo">
          {{pinfo.pname}}————{{pinfo.cname}}
        </el-col>
        <el-col :span="8" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="toBackContract">返回合同</el-button>
            <el-button type="primary" size="medium" @click="toBackProject">返回首页</el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <div style="margin-bottom:10px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-radio-group v-model="tableType" size="medium">
            <el-radio-button label="1" border>全部</el-radio-button>
            <el-radio-button label="2" border>软件运维</el-radio-button>
            <el-radio-button label="3" border>硬件运维</el-radio-button>
            <el-radio-button label="4" border>购买服务</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="12" :offset="0">
          <div class="right">
            <el-button type="primary" size="medium" @click="search" :loading="saveLoading">查询</el-button>
            <template v-if="this.switch && this.pinfo.copy_status!='0'">
              <el-button type="primary" size="medium" @click="addDevice">添加IT资产（软、硬件）运维需求</el-button>
              <el-button type="primary" size="medium" @click="addServe">添加购买服务、租用需求</el-button>
            </template>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      申请金额合计：{{titleData.apply_amount?titleData.apply_amount.toFixed(4):'0.0000'}}万元
    </div>
    <el-table :data="tableData" border stripe :max-height="offsetHeight" v-loading="loading">
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="device_name" label="名称" align="center">
      </el-table-column>
      <el-table-column label="类别" align="center">
        <template slot-scope="{row}">
          {{row.device_type?row.device_type :row.service_type | f_ITtypeRename}}
        </template>
      </el-table-column>
      <el-table-column prop="purchase_price" label="总购置价格" align="center" width="120" v-if="tableType!=='4'">
      </el-table-column>
      <el-table-column prop="service_pre_amount" label="总运维资金预算" align="center" width="120">
      </el-table-column>
      <el-table-column label="采购方式" align="center" width="100">
        <template slot-scope="{row}">
          {{row.buy_type | f_buyType}}
        </template>
      </el-table-column>
      <el-table-column prop="device_num" label="数量" align="center" width="80">
      </el-table-column>
      <el-table-column prop="center_plan_status" label="是否由中心统筹" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.center_plan_status == 1">是</span>
          <span v-if="scope.row.center_plan_status == 0">否</span>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" align="center" width="200">
        <template slot-scope="{row}">
          <el-button-group>
            <el-button type="primary" size="mini" @click="deviceInfo(row.id)" v-if="row.device_type">查看信息</el-button>
            <el-button type="primary" size="mini" @click="serveInfo(row.id)" v-else>查看信息</el-button>
            <el-button type="danger" size="mini" @click="remove(row.id)" v-if="tableSwitch">删除</el-button>
            <!-- <el-button type="warning" size="mini" @click="beforeBid(row.copy_old_id)" v-if="row.copy_old_id">往年招标参数
            </el-button> -->
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <!-- 软硬件信息 -->
    <el-drawer title="软、硬件信息" :visible.sync="deviceShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <device-item :device-params="deviceParams" :switch="this.switch" :copy-status="this.pinfo.copy_status"
        @cancel="cancel" @init="init"></device-item>
    </el-drawer>
    <!-- 购买服务信息 -->
    <el-drawer title="购买服务信息" :visible.sync="serveShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <serve-item :serve-params="serveParams" @cancel="cancel" :switch="this.switch"
        :copy-status="this.pinfo.copy_status" @init="init"></serve-item>
    </el-drawer>
    <!-- 往年招标信息 -->
    <el-drawer title="往年招标信息" :visible.sync="targetVarShow" size="70%" center :destroy-on-close="true"
      :wrapperClosable="false">
      <target-var-item @cancel="cancel" @init="init" :target-var-params="targetVarParams"
        :copy-status="this.pinfo.copy_status">
      </target-var-item>
    </el-drawer>
  </div>
</template>
<script>
import DeviceItem from '@/components/ItUsual/Device'
import ServeItem from '@/components/ItUsual/Serve'
import { f_ITtypeRename, f_buyType } from '@/utils/filters.js'
import TargetVarItem from '@/components/Bid/TargetVar.vue'

export default {
  name: 'It',
  components: {
    DeviceItem, ServeItem, TargetVarItem
  },
  props: {
    switch: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      offsetHeight: document.documentElement.clientHeight - 320,
      pinfo: {},
      titleData: {},
      tableType: '1',
      loading: false,
      saveLoading: false,
      tableDataAll: [],
      deviceShow: false,
      deviceParams: {},
      serveShow: false,
      serveParams: {},
      targetVarShow: false,
      targetVarParams: {}
    }
  },
  created () {

  },
  mounted () {
    // this.init()
  },
  methods: {
    async init () {
      this.pinfo = JSON.parse(sessionStorage.getItem("inputInfo"));
      const res = await this.$http('findWholeList', {
        contract_id: this.pinfo.cid
      })
      this.titleData = res
      this.loading = true
      const res1 = await this.$http('inputItList', {
        del_flag: '0',
        contract_id: this.pinfo.cid
      })
      this.tableDataAll = res1
      this.loading = false
    },
    cancel () {
      this.deviceShow = false
      this.deviceParams = {}
      this.serveShow = false
      this.serveParams = {}
      this.targetVarShow = false
      this.targetVarParams = {}
    },
    search () {
      this.saveLoading = true
      this.init()
      this.saveLoading = false
    },
    toBackContract () {
      this.$emit('toContract');
    },
    toBackProject () {
      this.$emit('toIndex');
    },
    addDevice () {
      this.deviceShow = true
      this.deviceParams = {
        cid: this.pinfo.cid,
      }
    },
    addServe () {
      this.serveShow = true
      this.serveParams = {
        cid: this.pinfo.cid,
      }
    },
    deviceInfo (id) {
      this.deviceShow = true
      this.deviceParams = {
        deviceId: id,
      }
    },
    serveInfo (id) {
      this.serveShow = true
      this.serveParams = {
        serveId: id,
      }
    },
    async beforeBid (id) {
      const res = await this.$http('inputItBid', {
        id: id
      })
      if (!res) {
        this.$tips.warning('往年未招标')
        return
      }
      this.targetVarParams = {
        id: res.subject_id,
      }
      this.targetVarShow = true
    },
    remove (id) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove1(id)
      }).catch(() => {

      });
    },
    async remove1 (id) {
      const res = await this.$http('inputItUp', {
        id: id,
        del_flag: '1'
      })
      this.$tips.success(res.errmsg)
      this.init()
    },
  },
  computed: {
    tableData () {
      let all = this.tableDataAll
      let hard = []
      let sort = []
      let serve = []
      this.tableDataAll.forEach(item => {
        if (item.device_type) {
          if (item.device_type.substr(2, 1) === '1') {
            hard.push(item)
          } else if (item.device_type.substr(2, 1) === '2') {
            sort.push(item)
          }
        } else {
          serve.push(item)
        }
      })
      if (this.tableType === '1') {
        return all
      } else if (this.tableType === '2') {
        return sort
      } else if (this.tableType === '3') {
        return hard
      } else if (this.tableType === '4') {
        return serve
      }
    },
    tableSwitch () {
      if (this.pinfo.copy_status) {
        if (this.switch && this.pinfo.copy_status != '0') {
          return this.switch
        } else {
          return false
        }
      } else {
        return this.switch
      }
    }
  },
  filters: {
    f_ITtypeRename: f_ITtypeRename,
    f_buyType: f_buyType
  }
}
</script>
<style lang='scss' scoped>
</style>
